<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <svg height="400" width="400" viewBox="0 0 100 100">
        <defs>
            <pattern id="p1" x="0" y="0" width=".2" height=".2" patternContentUnits="objectBoundingBox">
                <!-- 12 * 8-->
                <!-- 6 * 3-->
                <rect x="0" y="0"  width=".1" height=".1" fill="#caf"/>
                
            </pattern>
        </defs>

        <rect x="20" y="20" width="60" height="40" fill="url(#p1)" stroke="#00f" />
        <rect x="20" y="20" width="12" height="8" fill="none" stroke="#f00" stroke-width=".5"/>
    </svg>

    <svg height="400" width="400" viewBox="0 0 100 100">
        <defs>
            <pattern id="p2" x="10" y="10" width="10" height="10" patternUnits="userSpaceOnUse"  >
                <!-- 12 * 8-->
                <!-- 6 * 3-->
                <rect x="0" y="0"  width="5%" height="5%" fill="#caf"/>
                
            </pattern>
        </defs>

        <rect x="20" y="20" width="60" height="40" fill="url(#p2)" stroke="#00f" />
    </svg>

    <svg height="400" width="400" viewBox="0 0 100 100">
        <defs>                                                                                                       
            <pattern id="p3" x="50" y="50" width="10" height="10" patternUnits="userSpaceOnUse" patternContentUnits="objectBoundingBox" >
                <!-- 12 * 8-->
                <!-- 6 * 3-->
                <rect x=".1" y=".1"  width=".1" height=".1" fill="#caf"/>
                
            </pattern>
        </defs>

        <rect x="20" y="20" width="60" height="40" fill="url(#p3)" stroke="#00f" />
    </svg>



    <svg height="400" width="400" viewBox="0 0 100 100">
        <defs>           
            <pattern id="p41" x="0" y="0" width=".25" height=".25">
                <circle cx=".5" cy=".5" r=".5" style="fill:#fac"/>
            </pattern>                                                                                            
            <pattern id="p4" x="20" y="20" width="22" height="22" patternUnits="userSpaceOnUse"  >
                <rect x="1" y="1"  width="20" height="20" fill="#acf"/>
            </pattern>
        </defs>

        <rect x="20" y="20" width="66" height="66" fill="url(#p4)" stroke="#00f" />
    </svg>
    <svg height="400" width="400" viewBox="0 0 100 100">
        <defs>           
            <pattern id="p51" x="0" y="0" width=".5" height=".5" patternContentUnits="objectBoundingBox">
                <circle cx=".25" cy=".25" r=".25" style="fill:#fac"/>
            </pattern>                                                                                            
            <pattern id="p5" x="20" y="20" width="22" height="22" patternUnits="userSpaceOnUse"  >
                <rect x="1" y="1"  width="20" height="20" fill="url(#p51)"/>
            </pattern>
        </defs>

        <rect x="20" y="20" width="66" height="66" fill="url(#p5)" stroke="#00f" />
    </svg>
    <svg height="400" width="400" viewBox="0 0 100 100">
        <rect x="20" y="20" width="20" height="20" fill="url(#p51)" stroke="#00f" />
    </svg>

    <svg height="400" width="400" viewBox="0 0 100 100">
        <defs>           
            <pattern id="p61" x="0" y="0" width=".5" height=".5" patternContentUnits="userSpaceOnUse">
                <circle cx="5" cy="5" r="5" style="fill:#caf"/>
            </pattern>                                                                                            
            <pattern id="p6" x="20" y="20" width="20" height="20" patternUnits="userSpaceOnUse"  >
                <rect x="0" y="0"  width="20" height="20" fill="url(#p61)"/>
            </pattern>
        </defs>

        <rect x="20" y="20" width="40" height="40" fill="url(#p6)" stroke="#00f" />
    </svg>

    <svg height="400" width="400" viewBox="0 0 100 100">
        <defs>           
            <pattern id="p71" x="0" y="0" width=".5" height=".5" patternContentUnits="objectBoundingBox">
                <circle cx=".25" cy=".25" r=".25" style="fill:#caf"/>
            </pattern>                                                                                            
            <pattern id="p7" x="0" y="0" width=".33" height=".33" patternContentUnits="objectBoundingBox"  >
                <rect x="0" y="0"  width=".33" height=".33" fill="url(#p71)"/>
            </pattern>
        </defs>

        <rect x="20" y="20" width="20" height="20" fill="url(#p7)" stroke="#00f" />
    </svg>



    <svg height="400" width="400" viewBox="0 0 100 100">
        <defs>           
            <pattern id="p81" x="0" y="0" width=".5" height=".5" patternContentUnits="userSpaceOnUse">
                <circle cx="5" cy="5" r="5" style="fill:#caf"/>
            </pattern>                                                                                            
            <pattern id="p8" x="0" y="0" width=".33" height=".33"  >
                <rect x="0" y="0"  width="20" height="20" fill="url(#p81)"/>
            </pattern>
        </defs>

        <rect x="20" y="20" width="40" height="40" fill="url(#p8)" stroke="#00f" />
    </svg>


    <svg height="400" width="400" viewBox="0 0 100 100">
        <defs>                                                                                           
            <pattern viewBox="0 0 .5 .5"  id="p9" x="20" y="20" width="22" height="22" patternUnits="userSpaceOnUse" patternContentUnits="objectBoundingBox" >
                <rect x="0" y="0"  width=".33" height=".33" fill="#acf"/>
            </pattern>
        </defs>

        <rect x="20" y="20" width="66" height="66" fill="url(#p9)" stroke="#00f" />
    </svg>

    <svg height="400" width="400" viewBox="0 0 100 100">
        <defs>                                                                                           
            <pattern  id="p10" x="0" y="0" width=".33" height=".33"  patternContentUnits="objectBoundingBox" >
                <image href="../imgs/1.png" x="0" y="0" height=".32" width=".32" transform="rotate(45,.16,.16)" />
            </pattern>
        </defs>

        <rect x="20" y="20" width="40" height="40" fill="url(#p10)" stroke="#00f" />

        <image href="../imgs/1.png" x="0" y="0" height="20" width="20"/>
    </svg>

    <script src="index.js"></script>
</body>
</html>